
<template>
  <div>
    <el-row class="tac">
      <el-col :span="18">
        <h1><img src="./UI-logo(yuantu).png" alt=""></h1>
        <el-menu
          default-active="0"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#ffff"
          text-color="whirt"
         
        >
          <template v-for="(item, index) in luyou">

        <router-link :to="'/gonggong/'+item.path"  :key="index">
              <el-menu-item :index="item.path" v-if="!item.children">
                <i :class="item.meta.icon"></i>
                <span slot="title">{{ item.meta.title }}</span>
              </el-menu-item>
        </router-link>


          <!-- 二级导航 -->
          
        <el-submenu :index="item.path" v-if="item.children" :key="index">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">{{item.meta.title}}</span>
          </template>
          <template v-for="child,cindex in item.children" >
             <router-link :to="'/gonggong/'+item.path+'/'+child.path" :key="index - cindex" >
              <el-menu-item :index="child.path+cindex">{{child.meta.title}}</el-menu-item>
            </router-link>
          </template>
         
        </el-submenu>
      </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: true,
      luyou: [],
    };
  },
  mounted() {
    this.luyou = this.$store.state.routes[1].children;
    console.log(this.luyou);
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
h1{
  text-align: center;
}

</style>